<script setup>
import AiToolsBox from '@/components/AiToolsBox.vue'
import { ref, onMounted, onUnmounted } from 'vue'

// 侧边栏状态管理
const isSidebarOpen = ref(window.innerWidth >= 1024)
const isLargeScreen = ref(window.innerWidth >= 1024)

// 监听窗口大小变化
const handleResize = () => {
  isLargeScreen.value = window.innerWidth >= 1024
  isSidebarOpen.value = isLargeScreen.value
}

const initialLoad = ref(true)

onMounted(() => {
  window.addEventListener('resize', handleResize)
  // 添加延迟确保首次加载过渡效果禁用
  setTimeout(() => {
    initialLoad.value = false
  }, 600)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value
}

// 侧边栏菜单数据
const menuData = {
  main: [
    {
      id: 'ai_chat',
      title: 'AI智能对话',
      icon: '👾',
      type: 'main'
    },
    {
      id: 'ai_knowledge',
      title: 'AI知识库',
      icon: '📚',
      type: 'main'
    },
    {
      id: 'ai_tools',
      title: 'AI工具箱',
      icon: '🛠️',
      isOpen: true,
      type: 'main',
      children: [
        {
          id: 'chat',
          title: '智能对话',
          icon: '💬',
          description: '基于大语言模型的智能对话系统'
        },
        {
          id: 'search',
          title: '知识搜索',
          icon: '🔍',
          description: '海量知识库的智能搜索引擎'
        },
        {
          id: 'office',
          title: '办公助手',
          icon: '💼',
          description: '智能文档处理与办公自动化'
        },
        {
          id: 'legal',
          title: '法律助手',
          icon: '⚖️',
          description: '专业的法律咨询与文书处理'
        },
        {
          id: 'translate',
          title: '智能翻译',
          icon: '🌐',
          description: '多语言实时翻译与本地化'
        },
        {
          id: 'writing',
          title: '创作助手',
          icon: '✍️',
          description: '智能写作与内容创作辅助'
        },
        {
          id: 'image',
          title: '图像处理',
          icon: '🖼️',
          description: 'AI图像生成与智能处理'
        },
        {
          id: 'audio',
          title: '语音助手',
          icon: '🎵',
          description: '语音识别与音频处理'
        },
        {
          id: 'video',
          title: '视频工具',
          icon: '🎬',
          description: '智能视频编辑与处理'
        },
        {
          id: 'vr',
          title: '虚拟现实',
          icon: '🥽',
          description: 'VR内容创作与体验'
        },
        {
          id: 'data',
          title: '数据分析',
          icon: '📊',
          description: '智能数据处理与可视化'
        },
        {
          id: 'code',
          title: '代码助手',
          icon: '💻',
          description: '智能编程辅助与代码生成'
        }
      ]
    }
  ]
}

// 菜单展开状态管理
const openMenus = ref({
  ai_tools: true
})

const toggleMenu = (menuKey) => {
  openMenus.value[menuKey] = !openMenus.value[menuKey]
}

const createRipple = (event) => {
  const button = event.currentTarget;
  const ripple = document.createElement('div');
  
  const x = event.touches ? event.touches[0].clientX : event.clientX;
  const y = event.touches ? event.touches[0].clientY : event.clientY;
  
  const rect = button.getBoundingClientRect();
  const left = x - rect.left;
  const top = y - rect.top;
  
  ripple.style.left = `${left}px`;
  ripple.style.top = `${top}px`;
  ripple.className = 'ripple';
  
  const oldRipple = button.querySelector('.ripple');
  if (oldRipple) {
    oldRipple.remove();
  }
  
  button.appendChild(ripple);
  
  ripple.addEventListener('animationend', () => {
    ripple.remove();
  });
}

const isNavOpen = ref(false);

const toggleNav = () => {
  isNavOpen.value = !isNavOpen.value;
};

</script>

<template>
  <div class="min-h-screen relative overflow-hidden">
    <!-- 背景层 -->
    <div class="absolute inset-0 z-0">
      <!-- 使用网络图片作为背景图 -->
      <div 
        class="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style="background-image: url('https://s3-alpha-sig.figma.com/img/29d5/ae17/dc71fbe67f41d2eec7267842cb99ab16?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=CMhEzfFFx0kw58PNYQbvB72cpwzSIS3lNxsP38iLUFu0AuFgv4tJEt4AYNqEUNHqOsiyBcJWqgw8ClOrJP~TMPXW1e9o~fRYnext1TGS3xGBbAE8iBAJYhF8K7QYmUh6q7Z-BDnVf2gV0zj7lT3V8WhBHek3hl0lrfXy2qEwrtB5R4SRzONsdRNKUIRO6Ok7yu2-w9zfFZBpLiuQoWJTb58l0M6yLkhRwabzEg47FOIliL-5dQ5PQiCK-TS9SqPNJMW6EuNBwRwMef0alZHOx9qY793Su2qFVScTWxfoYct--FQOhiezYvm9NVDRohbmn6FffgS2rYr2PK5-NfmNkg__')"
      >
      </div>
    </div>

    <!-- 遮罩层 -->
    <transition name="fade">
      <div 
        v-if="isSidebarOpen && !isLargeScreen"
        @click="toggleSidebar"
        class="fixed inset-0 bg-black/20 backdrop-blur-sm z-30 lg:hidden
        transition-opacity duration-300"
        :class="isSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'">
      </div>
    </transition>


    <!-- 主要内容容器 -->
    <div class="relative flex flex-col h-screen">
      <!-- 右上角用户信息 -->
      <div class="fixed top-4 right-4 z-30">
        <div class="group relative">
          <!-- 主卡片 -->
          <div class="flex items-center pl-3.5 pr-4 py-2.5 rounded-2xl
            transition-all duration-500 cursor-pointer
            bg-gradient-to-br from-[rgba(255,255,255,0.95)] via-[rgba(255,255,255,0.9)] to-[rgba(255,255,255,0.85)]
            hover:from-[rgba(255,255,255,0.98)] hover:via-[rgba(255,255,255,0.95)] hover:to-[rgba(255,255,255,0.9)]
            backdrop-blur-xl
            border border-white/60
            shadow-[0_8px_32px_rgba(147,197,253,0.15)]
            hover:shadow-[0_12px_36px_rgba(147,197,253,0.25)]
            hover:-translate-y-0.5">

            <!-- 默认光效 -->
            <div class="absolute inset-0 rounded-2xl overflow-hidden">
              <div class="absolute inset-0 
                bg-[radial-gradient(circle_at_50%_-20%,rgba(147,197,253,0.15),transparent_70%)]">
              </div>
              <div class="absolute -inset-[1px] bg-gradient-to-r from-transparent via-white/50 to-transparent
                blur-sm opacity-30 group-hover:opacity-60 transition-opacity duration-500
                animate-shimmer"></div>
            </div>

            <!-- 头像区域 -->
            <div class="relative">
              <div class="relative transform transition-all duration-500
                group-hover:scale-105 group-hover:rotate-3">
                <img 
                  src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" 
                  alt="用户头像" 
                  class="w-9 h-9 rounded-xl
                    ring-[2px] ring-white
                    shadow-[0_2px_10px_rgba(147,197,253,0.3)]
                    transition-all duration-500"
                >
                <!-- 头像光晕 -->
                <div class="absolute -inset-2.5 rounded-xl bg-blue-400/10 
                  blur-md -z-10 transition-all duration-500
                  group-hover:bg-blue-400/20 group-hover:opacity-100"></div>
              </div>
              <!-- 在线状态 -->
              <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3
                bg-gradient-to-br from-emerald-400 to-emerald-500
                rounded-full ring-2 ring-white
                before:absolute before:inset-0 before:rounded-full
                before:bg-emerald-400 before:animate-ping before:opacity-75
                after:absolute after:inset-0 after:rounded-full
                after:bg-gradient-to-br after:from-emerald-400/50 after:to-emerald-500/50
                after:blur-sm"></div>
            </div>

            <!-- 用户信息 -->
            <div class="ml-3 mr-2">
              <p class="text-sm font-semibold
                bg-gradient-to-r from-blue-600 to-blue-800
                group-hover:from-blue-700 group-hover:to-blue-900
                bg-clip-text text-transparent
                transition-all duration-500
                drop-shadow-[0_1px_2px_rgba(96,165,250,0.25)]">
                智能知识库
              </p>
              <p class="text-xs
                bg-gradient-to-r from-blue-500/80 to-blue-600/80
                group-hover:from-blue-600/80 group-hover:to-blue-700/80
                bg-clip-text text-transparent
                transition-all duration-500">
                AI 助手
              </p>
            </div>

            <!-- 下拉箭头 -->
            <svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600 ml-1.5
              transition-all duration-500 transform group-hover:rotate-180" 
              fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                d="M19 9l-7 7-7-7"/>
            </svg>
          </div>

          <!-- 下拉菜单 -->
          <div class="absolute right-0 top-full mt-2 w-56 opacity-0 invisible translate-y-2
            group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
            transition-all duration-300 transform origin-top-right">
            
            <!-- 菜单容器 -->
            <div class="rounded-xl overflow-hidden
              bg-gradient-to-br from-white/95 via-white/90 to-white/85
              backdrop-blur-xl shadow-lg border border-white/60">
              
              <!-- 用户信息区域 -->
              <div class="px-4 py-3 border-b border-gray-100">
                <p class="text-sm font-medium
                  bg-gradient-to-r from-blue-600 to-blue-800
                  bg-clip-text text-transparent">
                  智能知识库
                </p>
                <p class="text-xs mt-0.5
                  bg-gradient-to-r from-blue-500/70 to-blue-600/70
                  bg-clip-text text-transparent">
                  admin@aihelper.com
                </p>
              </div>

              <!-- 菜单选项 -->
              <div class="py-2">
                <!-- 个人信息 -->
                <a href="#" class="flex items-center px-4 py-2.5 text-sm text-gray-600
                  hover:bg-blue-50 transition-colors duration-200 group/item">
                  <svg class="w-4 h-4 mr-3 text-gray-400 group-hover/item:text-blue-500
                    transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                  </svg>
                  <span class="group-hover/item:text-blue-600">个人信息</span>
                </a>

                <!-- 账号设置 -->
                <a href="#" class="flex items-center px-4 py-2.5 text-sm text-gray-600
                  hover:bg-blue-50 transition-colors duration-200 group/item">
                  <svg class="w-4 h-4 mr-3 text-gray-400 group-hover/item:text-blue-500
                    transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                  </svg>
                  <span class="group-hover/item:text-blue-600">账号设置</span>
                </a>

                <!-- 分隔线 -->
                <div class="h-px bg-gray-100 my-2"></div>

                <!-- 退出登录 -->
                <a href="#" class="flex items-center px-4 py-2.5 text-sm text-red-600
                  hover:bg-red-50 transition-colors duration-200 group/item">
                  <svg class="w-4 h-4 mr-3 text-red-400 group-hover/item:text-red-500
                    transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                  </svg>
                  <span class="group-hover/item:text-red-700">退出登录</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 主内容区域 -->
      <div class="flex flex-1 overflow-hidden">
        <!-- 左侧侧边栏 -->
        <div 
          :class="{
            'translate-x-0 opacity-100': isSidebarOpen || isLargeScreen,
            '-translate-x-full opacity-0': !isSidebarOpen && !isLargeScreen,
            'fixed lg:relative': true,
            'lg:translate-x-0 lg:opacity-100': true,
          }"
          class="w-64 bg-white backdrop-blur-xl border-r border-white/20 shadow-lg transform 
            transition-all duration-500 ease-in-out z-30 h-full overflow-y-auto"
          :style="initialLoad ? 'transition: none' : ''"
        >

          <!-- 侧边栏内容 -->
          <nav class="p-4 space-y-3 h-full overflow-y-auto">

                      <!-- 添加智能AI和Logo -->
          <div class="flex items-center p-4">
            <!-- Logo -->
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
              <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <!-- 标题和版本号 -->
            <div class="ml-3">
              <h2 class="text-lg font-semibold text-gray-800">智能AI</h2>
              <p class="text-sm text-gray-500">版本 1.0</p>
            </div>
          </div>
          <!-- 分隔线 -->
          <div class="border-b border-gray-200 my-2"></div>

            <template v-for="item in menuData.main" :key="item.id">
              <!-- 无子菜单的项目 -->
              <a v-if="!item.children" 
                class="group flex items-center px-4 py-3.5 rounded-xl
                  relative overflow-hidden
                  bg-gradient-to-r from-transparent to-transparent
                  hover:from-white/90 hover:to-transparent
                  active:scale-[0.98] my-1
                  transition-all duration-300 ease-out
                  before:absolute before:inset-0 before:rounded-xl before:transition-colors before:duration-300
                  hover:before:bg-blue-100/60
                  active:before:bg-blue-200/70"
                @click.prevent="createRipple">
                
                <!-- 悬浮光效 -->
                <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100
                  transition-opacity duration-500 pointer-events-none">
                  <div class="absolute inset-0 bg-gradient-to-r from-blue-400/20 via-transparent to-transparent"></div>
                  <div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(147,197,253,0.3),transparent_70%)]"></div>
                </div>

                <!-- 边框光效 -->
                <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100
                  transition-opacity duration-500 pointer-events-none">
                  <div class="absolute inset-[0.5px] rounded-xl border-[1.5px] border-blue-400/30"></div>
                </div>

                <span class="relative z-10 text-xl mr-4 text-gray-500 group-hover:text-blue-500 
                  transition-all duration-300 transform group-hover:scale-110">{{ item.icon }}</span>
                <span class="relative z-10 text-[15px] font-medium text-gray-600 group-hover:text-gray-800
                  tracking-wide transition-all duration-300">
                  {{ item.title }}
                </span>
              </a>

              <!-- 有子菜单的项目 -->
              <div v-else class="space-y-2 my-1">
                <div class="flex items-center px-4 py-3.5 text-gray-600 rounded-xl 
                  hover:bg-gradient-to-r hover:from-white/80 hover:to-transparent
                  cursor-pointer group transition-all duration-300
                  active:scale-[0.98]"
                  @click="toggleMenu(item.id)">
                  <span class="text-xl mr-4 text-gray-500 group-hover:text-blue-500 
                    transition-colors duration-300">{{ item.icon }}</span>
                  <span class="text-[15px] font-medium text-gray-600 group-hover:text-gray-700
                    tracking-wide transition-all duration-300 flex-1">
                    {{ item.title }}
                  </span>
                  <svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600
                    transition-all duration-300"
                    :class="{'rotate-180': openMenus[item.id]}"
                    fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                  </svg>
                </div>

                <!-- 子菜单 -->
                <div v-show="openMenus[item.id]" 
                  class="ml-4 space-y-2 pl-4 mt-2">
                  <a v-for="child in item.children" 
                    :key="child.id"
                    href="#" 
                    class="group/item flex items-center px-4 py-3 rounded-xl
                      relative overflow-hidden
                      bg-gradient-to-r from-transparent to-transparent
                      hover:from-white/70 hover:to-transparent
                      active:scale-[0.98]
                      transition-all duration-300 ease-out
                      before:absolute before:inset-0 before:rounded-xl before:transition-colors before:duration-300
                      hover:before:bg-blue-50/50
                      active:before:bg-blue-100/60"
                    @click.prevent="createRipple">
                    
                    <!-- 悬浮光效 -->
                    <div class="absolute inset-0 rounded-xl opacity-0 group-hover/item:opacity-100
                      transition-opacity duration-500 pointer-events-none">
                      <div class="absolute inset-0 bg-gradient-to-r from-blue-400/15 via-transparent to-transparent"></div>
                      <div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(147,197,253,0.25),transparent_70%)]"></div>
                    </div>

                    <!-- 边框光效 -->
                    <div class="absolute inset-0 rounded-xl opacity-0 group-hover/item:opacity-100
                      transition-opacity duration-500 pointer-events-none">
                      <div class="absolute inset-[0.5px] rounded-xl border border-blue-400/10"></div>
                    </div>

                    <span class="relative z-10 text-lg mr-3 text-gray-400 group-hover/item:text-blue-500
                      transition-all duration-300 transform group-hover/item:scale-110">{{ child.icon }}</span>
                    <span class="relative z-10 text-[14px] text-gray-500 group-hover/item:text-gray-700
                      transition-colors duration-300">
                      {{ child.title }}
                    </span>
                  </a>
                </div>
              </div>
            </template>
          </nav>
        </div>

        <!-- 右侧主内容 -->
        <div class="flex-1 overflow-y-auto">
          <AiToolsBox />
        </div>
      </div>
    </div>

    <!-- 3. 切换按钮 - 放在最上层 -->
    <button 
      @click="toggleSidebar"
      class="fixed left-4 top-4 z-50 lg:hidden
      p-2.5 rounded-xl
      bg-gradient-to-r from-blue-500/80 to-blue-600/80
      hover:from-blue-600/90 hover:to-blue-700/90
      text-white/90 hover:text-white
      shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30
      transition-all duration-300
      active:scale-95">
      <div class="relative">
        <!-- 菜单图标 -->
        <svg 
          class="w-5 h-5 transition-transform duration-300"
          :class="isSidebarOpen ? 'rotate-90' : 'rotate-0'"
          fill="none" 
          stroke="currentColor" 
          viewBox="0 0 24 24">
          <path 
            v-if="!isSidebarOpen"
            stroke-linecap="round" 
            stroke-linejoin="round" 
            stroke-width="2" 
            d="M4 6h16M4 12h16M4 18h16"/>
          <path 
            v-else
            stroke-linecap="round" 
            stroke-linejoin="round" 
            stroke-width="2" 
            d="M6 18L18 6M6 6l12 12"/>
        </svg>
        
        <!-- 光效 -->
        <div class="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100
          transition-opacity duration-500">
          <div class="absolute inset-0 
            bg-[radial-gradient(circle_at_50%_-20%,rgba(255,255,255,0.3),transparent_70%)]">
          </div>
        </div>
      </div>
    </button>
  </div>
</template>

<style>
/* 自定义滚动条样式 */
.overflow-y-auto::-webkit-scrollbar {
  width: 5px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.9), 
    rgba(243, 244, 246, 0.8)
  );
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    inset 0 1px 3px rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.05);
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 1), 
    rgba(243, 244, 246, 0.9)
  );
}


/* 保留其他有效的样式规则 */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ... 其他样式保持不变 ... */

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

/* 添加性能优化相关的样式 */
.will-change-transform {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.ripple {
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

@keyframes ripple {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

/* 添加淡入淡出动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}

/* 调整侧边栏光晕 */
.fixed.left-0.top-0.h-full.w-60.lg\:w-64 {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.02); /* 进一步降低透明度 */
}
</style>